<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 对象和 jQuery 对象</title>
</head>
<body>
<div id="testDiv" style="height: 100px;">Hello JQ.</div>

<button id="dom2dom">使用DOM对象调用DOM方法</button>
<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>

<script type="text/javascript" src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //获取 id = "testDiv" 元素
        //以 DOM 方式获取
        var testDivEle = document.getElementById('testDiv');
        //以 jQuery 方式获取
        var $testDivEle = $('#testDiv');
        //DOM对象打印：[object HTMLDivElement]
        alert(testDivEle);
        //jQuery对象打印：[object Object]
        alert($testDivEle);

        console.log(testDivEle);
        console.log($testDivEle);
        //使用原生 JavaScript 方式 改变testDiv的颜色
        // testDivEle.style.backgroundColor = 'red';
        //使用 jQuery 方式 改变testDiv的颜色
        $testDivEle.css('background-color', 'blue');
        //对 jQuery 对象调用原生DOM方法 会报错 并且无效
        // $testDivEle.style.backgroundColor = 'red';
        //对 DOM 对象调用 jQuery 方法 会报错
        // testDivEle.css('background-color','blue');

        $('#dom2dom').click(function () {
            //this:代表触发当前方法的 DOM 对象
            console.log(this);
            // document.getElementById('testDiv').innerText = 'DOM修改内部文本';
            document.getElementById('testDiv').innerHTML = 'DOM修改内部HTML';
        });

        $('#jQuery2jQuery').click(function () {
            //this:代表触发当前方法的 DOM 对象
            console.log(this);
            // $('#testDiv').text('jQuery修改内部文本');
            $('#testDiv').html('jQuery修改内部HTML');
        });

        //DOM对象和jQuery对象互转
        //互转意义：方便调用JQ或者JS的属性和方法
        //JQ对象转成DOM对象
        //jQuery对象[下标] 取出相应的DOM对象
        var $buttons = $('button');
        console.log($buttons);
        var button0 = $buttons[0];
        console.log(button0);
        //DOM对象转成JQUERY对象
        //$(DOM对象) 就可以转成JQ对象
        var $button0 = $(button0);
        console.log($button0);
    });
</script>
</body>
</html>